<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>CSS基础学习（3） | SuperXCR</title><meta name="author" content="SuperXCR"><meta name="copyright" content="SuperXCR"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="CSS-定位（一）1-1 Position-statiicCSS关键属性—-position    修饰全局DOM元素布局 static遵循默认的文档流布局，top,left,right,bottom,属性都无效 Position除了static属性外，，还有  relative (相对定位) absoulute (绝对定位) fixed (固定定位) sticky (粘性定位)  1-2 Pos">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS基础学习（3）">
<meta property="og:url" content="https://liqur.xyz/SuperXCR/3008f9ff.html">
<meta property="og:site_name" content="SuperXCR">
<meta property="og:description" content="CSS-定位（一）1-1 Position-statiicCSS关键属性—-position    修饰全局DOM元素布局 static遵循默认的文档流布局，top,left,right,bottom,属性都无效 Position除了static属性外，，还有  relative (相对定位) absoulute (绝对定位) fixed (固定定位) sticky (粘性定位)  1-2 Pos">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://liqur-1309874423.cos.ap-shanghai.myqcloud.com/s11.jpg">
<meta property="article:published_time" content="2022-09-01T02:00:03.000Z">
<meta property="article:modified_time" content="2022-09-15T13:50:34.405Z">
<meta property="article:author" content="SuperXCR">
<meta property="article:tag" content="CSS">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="定位">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://liqur-1309874423.cos.ap-shanghai.myqcloud.com/s11.jpg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://liqur.xyz/SuperXCR/3008f9ff.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  }
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'CSS基础学习（3）',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2022-09-15 21:50:34'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css" /><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css" media="defer" onload="this.media='all'"><script src="https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.4.2"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">16</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">15</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">8</div></a></div><hr/></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://liqur-1309874423.cos.ap-shanghai.myqcloud.com/s11.jpg')"><nav id="nav"><span id="blog-info"><a href="/" title="SuperXCR"><span class="site-name">SuperXCR</span></a></span><div id="menus"><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">CSS基础学习（3）</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-09-01T02:00:03.000Z" title="发表于 2022-09-01 10:00:03">2022-09-01</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-09-15T13:50:34.405Z" title="更新于 2022-09-15 21:50:34">2022-09-15</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/CSS/">CSS</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="CSS基础学习（3）"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h3 id="CSS-定位（一）"><a href="#CSS-定位（一）" class="headerlink" title="CSS-定位（一）"></a>CSS-定位（一）</h3><h4 id="1-1-Position-statiic"><a href="#1-1-Position-statiic" class="headerlink" title="1-1 Position-statiic"></a>1-1 Position-statiic</h4><p>CSS关键属性—-position    修饰全局DOM元素布局</p>
<p>static遵循默认的文档流布局，top,left,right,bottom,属性都无效</p>
<p>Position除了static属性外，，还有</p>
<ul>
<li>relative (相对定位)</li>
<li>absoulute (绝对定位)</li>
<li>fixed (固定定位)</li>
<li>sticky (粘性定位)</li>
</ul>
<h4 id="1-2-Position-relative-相对定位"><a href="#1-2-Position-relative-相对定位" class="headerlink" title="1-2 Position-relative(相对定位)"></a>1-2 Position-relative(相对定位)</h4><p>使用relative(相对定位) 来实现</p>
<p>relative在默认的文档流布局下，进行偏移</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.first</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="1-3-Position-absolute-绝对定位"><a href="#1-3-Position-absolute-绝对定位" class="headerlink" title="1-3 Position-absolute(绝对定位)"></a>1-3 Position-absolute(绝对定位)</h4><p>写为absolute后，改图片将会脱离信息流，其它照片依次向上移动，占据第一张图片位置</p>
<p>MDN解释：</p>
<p>元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并</p>
<p>关键词 ：</p>
<p><strong>最近</strong>  和   <strong>非static定位</strong>  和  <strong>祖先元素</strong></p>
<p>步骤</p>
<ol>
<li><p>首先获取第一张照片元素</p>
<p>发现是absolute布局</p>
</li>
<li><p>找寻父节点&lt; div class=”img-box”&gt; 未配置position   ,所以默认为position=static;   不符合非static</p>
</li>
</ol>
<ol>
<li>继续寻找&lt; div&gt;的父节点 ，， 到&lt; body&gt;</li>
</ol>
<ol>
<li>&lt; body &gt;已经没有父节点，所以按照&lt; body&gt;位置为标准进行偏移 </li>
</ol>
<h4 id="1-4-Position-fixed-固定位置"><a href="#1-4-Position-fixed-固定位置" class="headerlink" title="1-4 Position-fixed(固定位置)"></a>1-4 Position-fixed(固定位置)</h4><p>作用：使一个标题·固定，不随页面的滑动移动</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: fixed;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">left</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">color</span>: yellowgreen;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.img-box</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>但有时固定文字或图片会被其它元素覆盖</p>
<p>这是因为z-index的大小和代码先后顺序导致</p>
<p>1、默认非static元素的z-index都为0</p>
<p>2、z-index越大，则越在最上面，离观察者越近</p>
<p>3、同样的z-index，在HTML的元素越靠后，则越在最上面</p>
<h4 id="1-5-sticky-粘性定位"><a href="#1-5-sticky-粘性定位" class="headerlink" title="1-5 sticky(粘性定位)"></a>1-5 sticky(粘性定位)</h4><p>当页面滑动到相应位置时，该段文字或图片，会随着页面滑动而滑动</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: sticky;</span><br><span class="line">    <span class="attribute">color</span>: yellowgreen;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="CSS-定位（二）"><a href="#CSS-定位（二）" class="headerlink" title="CSS-定位（二）"></a>CSS-定位（二）</h3><h4 id="2-1-Float"><a href="#2-1-Float" class="headerlink" title="2-1 Float"></a>2-1 Float</h4><p>float  可以使元素靠左或者靠右排版</p>
<p>标签 nav main</p>
<p>nav: 一般用于表示此区块使导航区域</p>
<p>main: 一般用户表示此区块是网页的主体区域</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.logo</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: right;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="2-2-定位实战-一-：-模态框"><a href="#2-2-定位实战-一-：-模态框" class="headerlink" title="2-2 定位实战(一) ： 模态框"></a>2-2 定位实战(一) ： 模态框</h4><p>模态框简介；类似于我们登陆时凸显登陆界面，后界面变暗</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">模态框特点：</span><br><span class="line">1.模态框总是在浏览器的中心，浏览器随意放大缩小，模态框还是在浏览器中心</span><br><span class="line">2.模态框总有一个半透明背景</span><br></pre></td></tr></table></figure>
<h5 id="第一步：完成半透明背景"><a href="#第一步：完成半透明背景" class="headerlink" title="第一步：完成半透明背景"></a>第一步：完成半透明背景</h5><p>半透明背景覆盖整个页面</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;mask&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.mask</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: fixed;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="comment">/*通过fixed 再设置上下左右为 0 ，达到覆盖全屏*/</span></span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0.7</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="第二部：完成模态框内部"><a href="#第二部：完成模态框内部" class="headerlink" title="第二部：完成模态框内部"></a>第二部：完成模态框内部</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;modal&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;https://style.youkeda.com/img/ykd-components/logo.png&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.modal</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.modal</span> &gt; <span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">39px</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h5 id="元素居中方法"><a href="#元素居中方法" class="headerlink" title="元素居中方法"></a>元素居中方法</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">1.内部是行内元素，可以在父容器使用 text-align: center;</span><br><span class="line">2.内部是块状元素，可以在子容器上使用 margin: 0 auto;(如果不是块状元素，需要设置 display: block;)</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h5 id="元素垂直居中"><a href="#元素垂直居中" class="headerlink" title="元素垂直居中"></a>元素垂直居中</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">margin-top = (modal高度 - img 高度) / 2;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h5 id="第三步：完成模块框布局"><a href="#第三步：完成模块框布局" class="headerlink" title="第三步：完成模块框布局"></a>第三步：完成模块框布局</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.modal</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: fixed;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">     <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="comment">/*由于图片偏左下，所以需要设置负值是图片居中*/</span></span><br><span class="line">    <span class="attribute">margin-left</span>: -<span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: -<span class="number">75px</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.modal</span> &gt; <span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">39px</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h4 id="2-3-定位实战-二-：-搜索框"><a href="#2-3-定位实战-二-：-搜索框" class="headerlink" title="2-3 定位实战(二) ： 搜索框"></a>2-3 定位实战(二) ： 搜索框</h4><h5 id="第一步：完成搜索框"><a href="#第一步：完成搜索框" class="headerlink" title="第一步：完成搜索框"></a>第一步：完成搜索框</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;rigth&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;search&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">placeholder</span>=<span class="string">&quot;搜索你想要的东西&quot;</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">img</span> </span></span><br><span class="line"><span class="tag">             <span class="attr">src</span>=<span class="string">&quot;xxx&quot;</span></span></span><br><span class="line"><span class="tag">             /&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> </span></span><br><span class="line"><span class="tag">         <span class="attr">class</span>=<span class="string">&quot;avatar&quot;</span></span></span><br><span class="line"><span class="tag">         <span class="attr">src</span>=<span class="string">&quot;xxx&quot;</span></span></span><br><span class="line"><span class="tag">         /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.right</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: right;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.search</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">margin</span>-rigth: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">16px</span>;  <span class="comment">/* 1 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.search</span> &gt; <span class="selector-tag">input</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">220px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">36px</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">    <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">50px</span> <span class="number">0</span> <span class="number">15px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#ededed</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">18px</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">border</span>: none;</span><br><span class="line">    <span class="attribute">outline</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.search</span> &gt; <span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">34px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">34</span>xp;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>解释</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">1.  margin-top: 16px; 是通过计算得出  (nav 高度 -input高度) / 2</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>为使搜索图标嵌入搜索框内</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.search</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: realtive;</span><br><span class="line">    .....<span class="comment">/*上面有*/</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.search</span> &gt; <span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">1px</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">width</span>: <span class="number">34px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">34px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h5 id="第二部：完成搜索结果"><a href="#第二部：完成搜索结果" class="headerlink" title="第二部：完成搜索结果"></a>第二部：完成搜索结果</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">&lt;!--在搜索框图片下面--&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 搜索结果页面 --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;search-result&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>1号<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>2号<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>3号<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>4号<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.serach-result</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">60px</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">15px</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">1px</span> <span class="number">11px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0.16</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.search-result</span> &gt; <span class="selector-tag">li</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#1f2c41</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">height</span>: <span class="number">36px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">36px</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">width</span>: <span class="number">190px</span>;</span><br><span class="line">    <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#f3f3f3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h3 id="CSS-背景"><a href="#CSS-背景" class="headerlink" title="CSS 背景"></a>CSS 背景</h3><h4 id="3-1-背景颜色"><a href="#3-1-背景颜色" class="headerlink" title="3-1 背景颜色"></a>3-1 背景颜色</h4><h5 id="渐变色"><a href="#渐变色" class="headerlink" title="渐变色"></a>渐变色</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background</span>：linear-gradient(<span class="selector-tag">to</span> <span class="attribute">right</span>,<span class="selector-id">#95ca47</span>,<span class="selector-id">#4dc891</span>);</span><br><span class="line"><span class="comment">/*指明方向  从什么颜色到什么颜色*/</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h5 id="渐变位置"><a href="#渐变位置" class="headerlink" title="渐变位置"></a>渐变位置</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(to right,<span class="number">#95ca47</span> <span class="number">30%</span>,<span class="number">#4dc891</span> <span class="number">70%</span>);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>更多学习</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients">https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients</a></p>
<h4 id="3-2-背景图片"><a href="#3-2-背景图片" class="headerlink" title="3-2 背景图片"></a>3-2 背景图片</h4><p>给元素设置背景图片，及背景图片一些特性</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*添加图片*/</span></span><br><span class="line"><span class="attribute">background</span>-<span class="selector-tag">img</span>: <span class="built_in">url</span>(<span class="string">图片地址</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*设置背景图片重复*/</span></span><br><span class="line"></span><br><span class="line"><span class="attribute">background-repeat</span>: bo-repeat;</span><br><span class="line">repeat  <span class="comment">/*默认值 在垂直和水平方向进行重复*/</span></span><br><span class="line">repeat-x <span class="comment">/*在水平方向重复*/</span></span><br><span class="line">repeat-y <span class="comment">/*在垂直方向重复*/</span></span><br><span class="line">no-repeat <span class="comment">/*不重复*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*居中*/</span></span><br><span class="line"><span class="attribute">background-position</span>: center; <span class="comment">/*居中   还有top-left top-right等等*/</span> </span><br><span class="line">x% y%  <span class="comment">/*第一个水平位置  第二个垂直位置  */</span></span><br><span class="line">xpx  ypx  <span class="comment">/*自定义  第一个水平位置  第二个垂直位置  */</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p><strong>高级特性</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*背景撑满整个容器*/</span></span><br><span class="line"></span><br><span class="line"><span class="attribute">background-size</span>: ;</span><br><span class="line"></span><br><span class="line">cover  <span class="comment">/*把图像扩展足够大*/</span></span><br><span class="line"></span><br><span class="line"><span class="attribute">contain</span> <span class="comment">/*图像扩展至最大尺寸，完全适应宽度和高度*/</span></span><br><span class="line"></span><br><span class="line">xpx ypx  <span class="comment">/*手动设置*/</span></span><br><span class="line"></span><br><span class="line">x% y%</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p><strong>cover 长宽中较小的一方撑满，contain  长宽较大的一方撑满</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*background合并写法*/</span></span><br><span class="line"></span><br><span class="line"><span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">https://style.youkeda.com/img/ykd-components/logo.png</span>)</span><br><span class="line">    no-repeat center / contain;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>拓展</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background-attachment</span>: ;  fixed local scorll</span><br><span class="line"><span class="comment">/*背景图片相对与于视图滑动的设置*/</span></span><br><span class="line"></span><br><span class="line"><span class="attribute">background-clip</span>: ;   <span class="attribute">border</span>-box  <span class="attribute">padding</span>-box <span class="attribute">content</span>-box  text</span><br><span class="line"><span class="comment">/*background-clip  设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。*/</span></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://liqur.xyz">SuperXCR</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://liqur.xyz/SuperXCR/3008f9ff.html">https://liqur.xyz/SuperXCR/3008f9ff.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://liqur.xyz" target="_blank">SuperXCR</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/CSS/">CSS</a><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a><a class="post-meta__tags" href="/tags/%E5%AE%9A%E4%BD%8D/">定位</a></div><div class="post_share"><div class="social-share" data-image="https://liqur-1309874423.cos.ap-shanghai.myqcloud.com/s11.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/SuperXCR/cbdf841b.html" title="羊了个羊🐑无限道具（亲测有效）"><img class="cover" src="https://liqur-1309874423.cos.ap-shanghai.myqcloud.com/s6.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">羊了个羊🐑无限道具（亲测有效）</div></div></a></div><div class="next-post pull-right"><a href="/SuperXCR/88b49e9a.html" title="CSS基础学习（2）"><img class="cover" src="https://liqur-1309874423.cos.ap-shanghai.myqcloud.com/sceney6.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">CSS基础学习（2）</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/SuperXCR/9a013174.html" title="CSS基础学习（1）"><img class="cover" src="https://liqur-1309874423.cos.ap-shanghai.myqcloud.com/s3.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-09-01</div><div class="title">CSS基础学习（1）</div></div></a></div><div><a href="/SuperXCR/88b49e9a.html" title="CSS基础学习（2）"><img class="cover" src="https://liqur-1309874423.cos.ap-shanghai.myqcloud.com/sceney6.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-09-01</div><div class="title">CSS基础学习（2）</div></div></a></div><div><a href="/SuperXCR/3ce8deb9.html" title="HTML基础学习"><img class="cover" src="https://liqur-1309874423.cos.ap-shanghai.myqcloud.com/h2.webp" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-09-01</div><div class="title">HTML基础学习</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">SuperXCR</div><div class="author-info__description">今日事，今日毕</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">16</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">15</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">8</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS-%E5%AE%9A%E4%BD%8D%EF%BC%88%E4%B8%80%EF%BC%89"><span class="toc-number">1.</span> <span class="toc-text">CSS-定位（一）</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-1-Position-statiic"><span class="toc-number">1.1.</span> <span class="toc-text">1-1 Position-statiic</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-2-Position-relative-%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D"><span class="toc-number">1.2.</span> <span class="toc-text">1-2 Position-relative(相对定位)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-3-Position-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D"><span class="toc-number">1.3.</span> <span class="toc-text">1-3 Position-absolute(绝对定位)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-4-Position-fixed-%E5%9B%BA%E5%AE%9A%E4%BD%8D%E7%BD%AE"><span class="toc-number">1.4.</span> <span class="toc-text">1-4 Position-fixed(固定位置)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-5-sticky-%E7%B2%98%E6%80%A7%E5%AE%9A%E4%BD%8D"><span class="toc-number">1.5.</span> <span class="toc-text">1-5 sticky(粘性定位)</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS-%E5%AE%9A%E4%BD%8D%EF%BC%88%E4%BA%8C%EF%BC%89"><span class="toc-number">2.</span> <span class="toc-text">CSS-定位（二）</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-1-Float"><span class="toc-number">2.1.</span> <span class="toc-text">2-1 Float</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-2-%E5%AE%9A%E4%BD%8D%E5%AE%9E%E6%88%98-%E4%B8%80-%EF%BC%9A-%E6%A8%A1%E6%80%81%E6%A1%86"><span class="toc-number">2.2.</span> <span class="toc-text">2-2 定位实战(一) ： 模态框</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%AC%AC%E4%B8%80%E6%AD%A5%EF%BC%9A%E5%AE%8C%E6%88%90%E5%8D%8A%E9%80%8F%E6%98%8E%E8%83%8C%E6%99%AF"><span class="toc-number">2.2.1.</span> <span class="toc-text">第一步：完成半透明背景</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%AC%AC%E4%BA%8C%E9%83%A8%EF%BC%9A%E5%AE%8C%E6%88%90%E6%A8%A1%E6%80%81%E6%A1%86%E5%86%85%E9%83%A8"><span class="toc-number">2.2.2.</span> <span class="toc-text">第二部：完成模态框内部</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E5%B1%85%E4%B8%AD%E6%96%B9%E6%B3%95"><span class="toc-number">2.2.3.</span> <span class="toc-text">元素居中方法</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD"><span class="toc-number">2.2.4.</span> <span class="toc-text">元素垂直居中</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%AC%AC%E4%B8%89%E6%AD%A5%EF%BC%9A%E5%AE%8C%E6%88%90%E6%A8%A1%E5%9D%97%E6%A1%86%E5%B8%83%E5%B1%80"><span class="toc-number">2.2.5.</span> <span class="toc-text">第三步：完成模块框布局</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-3-%E5%AE%9A%E4%BD%8D%E5%AE%9E%E6%88%98-%E4%BA%8C-%EF%BC%9A-%E6%90%9C%E7%B4%A2%E6%A1%86"><span class="toc-number">2.3.</span> <span class="toc-text">2-3 定位实战(二) ： 搜索框</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%AC%AC%E4%B8%80%E6%AD%A5%EF%BC%9A%E5%AE%8C%E6%88%90%E6%90%9C%E7%B4%A2%E6%A1%86"><span class="toc-number">2.3.1.</span> <span class="toc-text">第一步：完成搜索框</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%AC%AC%E4%BA%8C%E9%83%A8%EF%BC%9A%E5%AE%8C%E6%88%90%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C"><span class="toc-number">2.3.2.</span> <span class="toc-text">第二部：完成搜索结果</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS-%E8%83%8C%E6%99%AF"><span class="toc-number">3.</span> <span class="toc-text">CSS 背景</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-1-%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2"><span class="toc-number">3.1.</span> <span class="toc-text">3-1 背景颜色</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%B8%90%E5%8F%98%E8%89%B2"><span class="toc-number">3.1.1.</span> <span class="toc-text">渐变色</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%B8%90%E5%8F%98%E4%BD%8D%E7%BD%AE"><span class="toc-number">3.1.2.</span> <span class="toc-text">渐变位置</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2-%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87"><span class="toc-number">3.2.</span> <span class="toc-text">3-2 背景图片</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/SuperXCR/7f8be62d.html" title="你不会还不会安装Maven吧"><img src="https://liqur-1309874423.cos.ap-shanghai.myqcloud.com/SuperXCR/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230310162508.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="你不会还不会安装Maven吧"/></a><div class="content"><a class="title" href="/SuperXCR/7f8be62d.html" title="你不会还不会安装Maven吧">你不会还不会安装Maven吧</a><time datetime="2023-03-10T09:57:23.000Z" title="发表于 2023-03-10 17:57:23">2023-03-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/SuperXCR/c24675b4.html" title="MySQL"><img src="https://liqur-1309874423.cos.ap-shanghai.myqcloud.com/MySQL%E9%85%8D%E7%BD%AE/mysql.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="MySQL"/></a><div class="content"><a class="title" href="/SuperXCR/c24675b4.html" title="MySQL">MySQL</a><time datetime="2022-11-21T06:48:00.000Z" title="发表于 2022-11-21 14:48:00">2022-11-21</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/SuperXCR/bfa56f5e.html" title="Navicat_Premium_16破解"><img src="https://liqur-1309874423.cos.ap-shanghai.myqcloud.com/s1.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Navicat_Premium_16破解"/></a><div class="content"><a class="title" href="/SuperXCR/bfa56f5e.html" title="Navicat_Premium_16破解">Navicat_Premium_16破解</a><time datetime="2022-09-26T02:55:58.000Z" title="发表于 2022-09-26 10:55:58">2022-09-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/SuperXCR/b2444a9.html" title="MySQL安装配置"><img src="https://liqur-1309874423.cos.ap-shanghai.myqcloud.com/MySQL%E9%85%8D%E7%BD%AE/mysql.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="MySQL安装配置"/></a><div class="content"><a class="title" href="/SuperXCR/b2444a9.html" title="MySQL安装配置">MySQL安装配置</a><time datetime="2022-09-24T03:30:42.000Z" title="发表于 2022-09-24 11:30:42">2022-09-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/SuperXCR/a219e661.html" title="羊了个羊17最新版"><img src="https://liqur-1309874423.cos.ap-shanghai.myqcloud.com/s6.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="羊了个羊17最新版"/></a><div class="content"><a class="title" href="/SuperXCR/a219e661.html" title="羊了个羊17最新版">羊了个羊17最新版</a><time datetime="2022-09-16T05:18:03.000Z" title="发表于 2022-09-16 13:18:03">2022-09-16</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By SuperXCR</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><script>
    // 全局变量声明区域
    var fdata = {
      apiurl: 'https://hexo-friendcircle-api-ai9d4hwad-anzhiyu-c.vercel.app/api',
      initnumber: 20, //【可选】页面初始化展示文章数量
      stepnumber: 10, //【可选】每次加载增加的篇数
      error_img: 'https://npm.elemecdn.com/akilar-candyassets/image/404.gif' //【可选，头像图片加载失败时的默认头像】
    }
    //存入本地存储
    localStorage.setItem("fdatalist",JSON.stringify(fdata))
    </script>
    <script defer src="https://npm.elemecdn.com/hexo-filter-fcircle/assets/js/fetch.min.js"></script><script data-pjax>
  function butterfly_clock_anzhiyu_injector_config(){
    var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
    var item_html = '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img class="entered loading" id="card-clock-loading" src="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading"/></div></div></div></div></div>';
    console.log('已挂载butterfly_clock_anzhiyu')
    if(parent_div_git) {
      parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  }
  var elist = 'null'.split(',');
  var cpage = location.pathname;
  var epage = 'all';
  var qweather_key = 'b16a1fa0e63c46a4b8f28abfb06ae3fe';
  var gaud_map_key = 'e2b04289e870b005374ee030148d64fd&s=rsv3';
  var baidu_ak_key = 'undefined';
  var flag = 0;
  var clock_rectangle = '112.982279,28.19409';
  var clock_default_rectangle_enable = 'false';

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_clock_anzhiyu_injector_config();
  }
  else if (epage === cpage){
    butterfly_clock_anzhiyu_injector_config();
  }
  </script><script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script><script data-pjax src="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js"></script><script async src="/js/ali_font.js"></script><!-- hexo injector body_end end --></body></html>